﻿

/// <reference path='exlib/jquery.min.js' />
/// <reference path='ol3/ol-whitespace.js' />


goog.provide('ol.control.LiuGLayerManagement');

goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('ol.control.Control');
goog.require('ol.control.LiuGForm');
goog.require('ol.css');
goog.require('ol.pointer.PointerEventHandler');



ol.control.LiuGLayerManagement = function (opt_options)
{
    var options = goog.isDef(opt_options) ? opt_options : {};


    var className = goog.isDef(options.className) ? options.className :
        'ol-layerManagement';

    //var tipLabel = goog.isDef(options.tipLabel) ?
    //    options.tipLabel : 'Fit to extent';
    //var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
    //    'role': 'tooltip'
    //}, tipLabel);
    this.layerElement = goog.dom.createDom(goog.dom.TagName.DIV, {
        'class': className
    });

    //卷帘效果
    this.currentSwipeLayer_ = null;
    this.swipeControl = null;
    //this.swipeValue_ = 50;


    goog.base(this, {
        element: this.layerElement,
        target: options.target,
        width: (options.width ? options.width : 180),
        height: (options.height ? options.height : 128),
        minWidth: (options.minWidth ? options.minWidth : 180),
        minHeight: (options.minHeight ? options.minHeight : 128),
        top: (options.top ? options.top : 50),
        right: (options.right ? options.right : 10),
        title: (options.title) ? options.title : '图层管理',
    });
};
goog.inherits(ol.control.LiuGLayerManagement, ol.control.LiuGForm);


ol.control.LiuGLayerManagement.prototype.setMap=function(map)
{
    goog.base(this, 'setMap', map);

    var curMap = this.getMap();

    if (goog.isNull(curMap))
    {
        return;
    }

    this.InitLayerControl(curMap);

}

ol.control.LiuGLayerManagement.prototype.InitLayerControl = function (curMap)
{
    var controlUl = goog.dom.createDom(goog.dom.TagName.UL, {});

    ///选择框
    //var checkbox = goog.dom.createDom(goog.dom.TagName.INPUT, {'checked':true, 'type': 'checkbox', 'class': 'checkbox' });
    //goog.dom.appendChild(controlUl, checkbox);

    //goog.events.listen(checkbox, goog.events.EventType.CHANGE, function ()
    //{
    //    curMap.getLayerGroup().setVisible(checkbox.checked);
    //    $(controlUl).find("li [type='checkbox']").each(function(index,chb)
    //    {
    //        chb.checked = checkbox.checked;
    //    });//.checked = this.checked;

    //    curMap.getLayerGroup().getLayers().forEach(function (subLayer, i)
    //    {
    //        subLayer.setVisible(checkbox.checked);
    //    });
    //    this.setParentLayerVisible(curMap.getLayerGroup(), checkbox.checked);

    //}, false,this);


    //var title = goog.dom.createDom(goog.dom.TagName.SPAN, { 'class': 'layername' }, "图层");
    //goog.dom.appendChild(controlUl, title);

    //var layers = curMap.getLayers();

    //layers.forEach(function (layer, i)
    //{
    //    //设置父图层及选择框元素
    //    layer.parentLayer = curMap.getLayerGroup();
    //    layer.parentElement = checkbox;

    //    if (layer instanceof ol.layer.Group)
    //    {
    //        goog.dom.appendChild(controlUl, this.InitLayerGroup(layer, "layerGroup" + i));
    //    }
    //    else
    //    {
    //        goog.dom.appendChild(controlUl, this.InitLayer(layer, "layer" + i));
    //    }

    //}, this);


    goog.dom.appendChild(controlUl, this.InitLayerGroup(curMap.getLayerGroup(), "图层" ));

    goog.dom.appendChild(this.layerElement, controlUl);

    //var x = $(controlUl).first();
    //$(controlUl).first().css({ "margin-left": "0px" });

    //设置所有的图层名称鼠标形状为小手
    $(controlUl).find('span').click(function ()
    {
        $(this).siblings('fieldset').toggle();
    }).siblings('fieldset').hide();

}


ol.control.LiuGLayerManagement.prototype.InitLayerGroup = function (layerGroup,layerGroupId)
{
    //var liContent=this.InitLayer()
    var contentLi = goog.dom.createDom(goog.dom.TagName.LI, {});
    if (!goog.isDef(layerGroup.parentLayer))
    {
        contentLi.className = "first";
    }

    ///选择框
    var oriChecked = layerGroup.getVisible();
    var checkbox = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'checkbox', 'class': 'checkbox', 'checked': oriChecked });
    goog.dom.appendChild(contentLi, checkbox);
    goog.events.listen(checkbox, goog.events.EventType.CHANGE, function ()
    {
        layerGroup.setVisible(checkbox.checked);
        // 修改下边的属性  图层checkbox
        $(groupUL).find("li .checkbox").each(function (index, chb)
        {
            chb.checked = checkbox.checked;
        });

        layerGroup.getLayers().forEach(function (subLayer, i)
        {
            subLayer.setVisible(checkbox.checked);
        });

        this.setParentLayerVisible(layerGroup, checkbox.checked);

    }, false,this);

    //图层名称    （此处使用了私有变量，有待改进）
    var layerName = layerGroup.values_.layerName ? layerGroup.values_.layerName : layerGroupId;
    var layertitle = goog.dom.createDom(goog.dom.TagName.SPAN, { 'class': 'layername' }, layerName);
    goog.dom.appendChild(contentLi, layertitle);


    var layerControl = goog.dom.createDom(goog.dom.TagName.DIV, { 'class': 'layercontrolcontainer' });

    //图层删除按钮
    var removeLayer = goog.dom.createDom(goog.dom.TagName.A, { 'class': 'removelayer' });
    goog.events.listen(removeLayer, goog.events.EventType.CLICK, function ()
    {
        if (layerGroup.parentLayer)
        {
            layerGroup.parentLayer.getLayers().remove(layerGroup);
            contentLi.parentElement.removeChild(contentLi);
        }
    }, false, this);

    var upLayer = goog.dom.createDom(goog.dom.TagName.A, { 'class': 'uplayer' });
    goog.events.listen(upLayer, goog.events.EventType.CLICK, function ()
    {
        if (layerGroup.parentLayer)
        {
            var layerIndex = this.getIndex(layerGroup);
            if (layerIndex - 1 < 0)
            {
                return;
            }
            var tempLayer = layerGroup.parentLayer.getLayers().getAt(layerIndex - 1);
            layerGroup.parentLayer.getLayers().setAt(layerIndex - 1, layerGroup);
            layerGroup.parentLayer.getLayers().setAt(layerIndex, tempLayer);

            var pre = contentLi.previousSibling;
            contentLi.parentElement.removeChild(contentLi);
            pre.parentElement.insertBefore(contentLi, pre);

        }
    }, false, this);
    var downLayer = goog.dom.createDom(goog.dom.TagName.A, { 'class': 'downlayer' });
    goog.events.listen(downLayer, goog.events.EventType.CLICK, function ()
    {
        if (layerGroup.parentLayer)
        {
            var layerIndex = this.getIndex(layerGroup);
            if (layerIndex + 1 >= layerGroup.parentLayer.getLayers().get('length'))
            {
                return;
            }
            var tempLayer = layerGroup.parentLayer.getLayers().getAt(layerIndex + 1);
            layerGroup.parentLayer.getLayers().setAt(layerIndex + 1, layerGroup);
            layerGroup.parentLayer.getLayers().setAt(layerIndex, tempLayer);

            var next = contentLi.nextSibling;
            contentLi.parentElement.removeChild(contentLi);
            if (next == next.parentElement.lastChild)
            {
                next.parentElement.appendChild(contentLi);
            }
            else
            {
                next.parentElement.insertBefore(contentLi, next.nextSibling);
            }
        }
    }, false, this);


    goog.dom.appendChild(layerControl, upLayer);
    goog.dom.appendChild(layerControl, downLayer);
    goog.dom.appendChild(layerControl, removeLayer);
    //属性参数
    var fieldset = goog.dom.createDom(goog.dom.TagName.FIELDSET, { 'class': 'layerparam' });
    goog.dom.appendChild(contentLi, fieldset);

    /// 图层管理按钮

    goog.dom.appendChild(fieldset, layerControl);

    /// 透明度
    var opacityLabel = goog.dom.createDom(goog.dom.TagName.SPAN, { 'class': 'paramname' }, "Opacity");
    var oparange = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'range', 'class': 'range', 'value': layerGroup.getOpacity()*100 });
    goog.events.listen(oparange, goog.events.EventType.CHANGE, function ()
    {
        layerGroup.setOpacity(this.value / 100);
    }, false);

    goog.dom.appendChild(fieldset, opacityLabel);
    goog.dom.appendChild(fieldset, oparange);


    var groupUL = goog.dom.createDom(goog.dom.TagName.UL, {});

    var layers = layerGroup.getLayers();

    layers.forEach(function (layer, i)
    {
        //设置父图层组以及选择框
        layer.parentLayer = layerGroup;
        layer.parentElement = checkbox;

        if (layer instanceof ol.layer.Group)
        {
            goog.dom.appendChild(groupUL, this.InitLayerGroup(layer, "layerGroup" + i));
        }
        else
        {
            goog.dom.appendChild(groupUL, this.InitLayer(layer, "layer" + i));
        }
        
    }, this)

    goog.dom.appendChild(contentLi, groupUL);

    return contentLi;

}

// 初始化一个图层，，前边的部分可以提出个方法来
ol.control.LiuGLayerManagement.prototype.InitLayer = function (layer,layerid)
{
    var contentLi = goog.dom.createDom(goog.dom.TagName.LI, {});

    ///选择框
    var oriChecked = layer.getVisible();
    var checkbox = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'checkbox', 'class': 'checkbox', 'checked': oriChecked });
    goog.dom.appendChild(contentLi, checkbox);

    goog.events.listen(checkbox, goog.events.EventType.CHANGE, function ()
    {
        layer.setVisible(checkbox.checked);
        this.setParentLayerVisible(layer, checkbox);
    }, false,this);

    //图层名称    （此处使用了私有变量，有待改进）
    var layerName = layer.values_.layerName ? layer.values_.layerName : layerid;
    var layertitle = goog.dom.createDom(goog.dom.TagName.SPAN, {'class':'layername'}, layerName);
    goog.dom.appendChild(contentLi, layertitle);


    var layerControl = goog.dom.createDom(goog.dom.TagName.DIV, {'class':'layercontrolcontainer'});

    //图层删除按钮
    var removeLayer = goog.dom.createDom(goog.dom.TagName.A, { 'class': 'removelayer' });
    goog.events.listen(removeLayer, goog.events.EventType.CLICK, function ()
    {
        if (layer.parentLayer)
        {
            layer.parentLayer.getLayers().remove(layer);
            contentLi.parentElement.removeChild(contentLi);
        }
    }, false, this);

    var upLayer = goog.dom.createDom(goog.dom.TagName.A, { 'class': 'uplayer' });
    goog.events.listen(upLayer, goog.events.EventType.CLICK, function ()
    {
        if (layer.parentLayer)
        {
            var layerIndex = this.getIndex(layer);
            if (layerIndex - 1 < 0)
            {
                return;
            }
            var tempLayer = layer.parentLayer.getLayers().getAt(layerIndex - 1);
            layer.parentLayer.getLayers().setAt(layerIndex - 1, layer);
            layer.parentLayer.getLayers().setAt(layerIndex, tempLayer);

            var pre = contentLi.previousSibling;
            contentLi.parentElement.removeChild(contentLi);
            pre.parentElement.insertBefore(contentLi, pre);

        }
    }, false, this);
    var downLayer = goog.dom.createDom(goog.dom.TagName.A, { 'class': 'downlayer' });
    goog.events.listen(downLayer, goog.events.EventType.CLICK, function ()
    {
        if (layer.parentLayer)
        {
            var layerIndex = this.getIndex(layer);
            if (layerIndex + 1 >= layer.parentLayer.getLayers().get('length'))
            {
                return;
            }
            var tempLayer = layer.parentLayer.getLayers().getAt(layerIndex + 1);
            layer.parentLayer.getLayers().setAt(layerIndex + 1, layer);
            layer.parentLayer.getLayers().setAt(layerIndex, tempLayer);

            var next = contentLi.nextSibling;
            contentLi.parentElement.removeChild(contentLi);
            if (next == next.parentElement.lastChild)
            {
                next.parentElement.appendChild(contentLi);
            }
            else
            {
                next.parentElement.insertBefore(contentLi, next.nextSibling);
            }
        }
    }, false, this);


    goog.dom.appendChild(layerControl, upLayer);
    goog.dom.appendChild(layerControl, downLayer);
    goog.dom.appendChild(layerControl, removeLayer);


    //属性参数
    var fieldset = goog.dom.createDom(goog.dom.TagName.FIELDSET, { 'class': 'layerparam' });
    goog.dom.appendChild(contentLi, fieldset);

    //图层控制按钮
    goog.dom.appendChild(fieldset, layerControl);

    /// 透明度
    var opacityLabel = goog.dom.createDom(goog.dom.TagName.SPAN, {'class':'paramname'}, "Opacity");
    var oparange = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'range', 'class': 'range', 'value': layer.getOpacity()*100 });
    goog.events.listen(oparange, goog.events.EventType.CHANGE, function ()
    {
        layer.setOpacity(this.value / 100);
    }, false);

    /// 卷帘效果
    var swipeLabel = goog.dom.createDom(goog.dom.TagName.SPAN, { 'class': 'paramname' }, "Swipe");
    var swiperange = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'range', 'class': 'range' });
    goog.events.listen(swiperange, goog.events.EventType.CHANGE, function ()
    {
        //this.swipeValue_ = swiperange.value;
        this.getMap().render();

    }, false, this);
    var swipecheckbox = goog.dom.createDom(goog.dom.TagName.INPUT, { 'type': 'checkbox', 'class': 'swipecheckbox', 'checked': false });
    goog.events.listen(swipecheckbox, goog.events.EventType.CHANGE, function ()
    {
        var orivalue = swipecheckbox.checked;
        $(".swipecheckbox").each(function (e, f)
        {
            f.checked = false;
        });
        swipecheckbox.checked = orivalue;
        if (!goog.isNull(this.currentSwipeLayer_))
        {
            this.currentSwipeLayer_.un('precompose', this.precompose, swipeControl);
            this.currentSwipeLayer_.un('postcompose', this.postcompose);
        }
        if (swipecheckbox.checked)
        {
            this.currentSwipeLayer_ = layer;
            swipeControl = swiperange;
            this.currentSwipeLayer_.on('precompose', this.precompose, swipeControl);
            this.currentSwipeLayer_.on('postcompose', this.postcompose);
        }

        this.getMap().render();

    }, false, this);
    


    goog.dom.appendChild(fieldset, opacityLabel);
    goog.dom.appendChild(fieldset, oparange);
    goog.dom.appendChild(fieldset, swipecheckbox);
    goog.dom.appendChild(fieldset, swipeLabel);
    goog.dom.appendChild(fieldset, swiperange);
    

    return contentLi;
}


ol.control.LiuGLayerManagement.prototype.setParentLayerVisible=function(layer, visible)
{
    if (layer.parentLayer && layer.parentElement && visible)
    {
        layer.parentLayer.setVisible(visible);
        layer.parentElement.checked = visible;

        this.setParentLayerVisible(layer.parentLayer, visible);
    }
}


ol.control.LiuGLayerManagement.prototype.getIndex=function(layer)
{
    var index = -1;
    if (!goog.isNull(layer)&&goog.isDef(layer.parentLayer))
    {
        layer.parentLayer.getLayers().forEach(function (sublayer, i)
        {
            if (layer == sublayer)
            {
                index = i;
                return false;
            }
        });
    }
    return index;
}

ol.control.LiuGLayerManagement.prototype.precompose = function (event)
{
    var ctx = event.context;
    var width = ctx.canvas.width * (this.value / 100);

    ctx.save();
    ctx.beginPath();
    ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
    ctx.clip();
}
ol.control.LiuGLayerManagement.prototype.postcompose = function (event)
{
    var ctx = event.context;
    ctx.restore();
}
//bing.on('precompose', function (event)
//{
    
//});

//bing.on('postcompose', function (event)
//{
//    var ctx = event.context;
//    ctx.restore();
//});

